<template>
  <div class="webssh-wrapper">
    <Card :dis-hover="true">
      <Form :model="connectData" ref="formInlineEdit" :rules="ruleInline" label-position="right" label-colon :label-width="85">
        <Row :gutter="10">
          <Col :xs="24" :sm="24" :md="24" :lg="24">
            <FormItem label="主机地址" prop="host">
              <Input clearable v-model="connectData.host" placeholder="请输入ip"/>
            </FormItem>
          </Col>
          <Col :xs="24" :sm="24" :md="24" :lg="24">
            <FormItem label="用户名" prop="username">
              <Input clearable v-model="connectData.username" placeholder="请输入用户名"/>
            </FormItem>
          </Col>
          <Col :xs="24" :sm="24" :md="24" :lg="24">
            <FormItem label="密码" prop="password">
              <Input password type="password" v-model="connectData.password" placeholder="请输入密码"/>
            </FormItem>
          </Col>
          <Col :xs="24" :sm="24" :md="24" :lg="24">
            <FormItem label="端口" prop="port">
              <Input clearable v-model="connectData.port" placeholder="运行端口"/>
            </FormItem>
          </Col>
          <Col :xs="24" :sm="24" :md="24" :lg="24" style="text-align: center">
            <Button si type="primary" @click="exec" shape="circle">连接终端</Button>
          </Col>
        </Row>
      </Form>
    </Card>
  </div>
</template>

<script>
import { JSEncrypt } from 'jsencrypt'
export default {
  name: 'webssh',
  data(){
    return {
      connectData: {
        host: '',
        username: '',
        password: '',
        port: '22'
      },
      ruleInline: {
        host: [
          { required: true, message: 'ip地址不能为空'}
        ],
        username: [
          { required: true, message: '用户名不能为空'}
        ],
        password: [
          { required: true, message: '密码不能为空'}
        ],
        port: [
          { required: true, message: '端口不能为空'}
        ]
      },
    }
  },
  methods:{
    exec(){
      this.$refs['formInlineEdit'].validate((valid) => {
        if(valid){
          let data = {
            host: this.connectData.host,
            username: this.encryptedData(this.connectData.username),
            password: this.encryptedData(this.connectData.password),
            port: this.connectData.port
          }
          localStorage.setItem(this.connectData.host,JSON.stringify(data))
          const path = this.$router.resolve({name: 'websshTerm', query: {
            host: this.connectData.host
          }})
          window.open(path.href,'_blank')
        }
      })
    },
    encryptedData(data) {
      // 新建JSEncrypt对象
      let encryptor = new JSEncrypt();
      // 设置公钥
      encryptor.setPublicKey('MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCHWcFya290PvyT+2aBtdUP6PMXO87jfqeXm2Vrsa8jT5+nQi7/5JdVt7EJJcAJgvPPFCGyWXF8w5xKjjvdxTolv5xTqgYU9uKuZGL9XCpAHrhzKeEAInF10J6RyosnV574gezt3QlbG4vTt8/VzOow7iSjHhDjDC5pombhQaRWfwIDAQAB');
      // 加密数据
      return encryptor.encrypt(data);
    },
  }
}
</script>

<style lang="less" scoped>
.webssh-wrapper{
  max-width: 1280px;
  margin: 0 auto;
}
</style>

<style scoped>
.demo-split-pane >>> textarea.ivu-input{
  height: calc(100vh - 199px);
  resize: none;
}
</style>
